<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">horizontal-scroll</view>
			<view class="tui-page__desc">常用布局案例</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<scroll-view scroll-x class="tui-bg__white">
				<view class="tui-goods__list">
					<view class="tui-goods__item" v-for="(item, index) in 8" :key="index">
						<view class="tui-goods__imgbox"><image :src="`/static/images/layout/${index % 2 == 0 ? 1 : 2}.jpg`" mode="widthFix" class="tui-goods__img"></image></view>
						<view class="tui-pri__box">
							<view class="tui-sale-pri">
								<view class="tui-size-sm">¥</view>
								<view>298</view>
								<view class="tui-size-sm">.50</view>
							</view>
						</view>
						<view class="tui-original__pri">¥399.00</view>
					</view>
					<view class="tui-more__box">
						<view class="tui-more__text">查看更多</view>
						<image src="/static/images/layout/icon_home_seemore.png" class="tui-more__ic"></image>
					</view>
					<view class="tui-space__box"></view>
				</view>
			</scroll-view>

			<view class="tui-section__title"><text>direction: row\n自制滑动滚动条</text></view>
			<view class="tui-menu__list tui-bg__white">
				<scroll-view scroll-x @scroll="wxs.scroll" :data-scrollW="scrollW" :data-width="width">
					<view class="tui-menu__box">
						<view class="tui-menu__item" v-for="(item, index) in menuList" :key="index">
							<image :src="'https://www.thorui.cn/extend/menu/' + item.icon" class="tui-menu__ic"></image>
							<view class="tui-menu__text">{{ item.text }}</view>
						</view>
					</view>
					<view class="tui-menu__box">
						<view class="tui-menu__item" v-for="(item, index) in menuList2" :key="index">
							<image :src="'https://www.thorui.cn/extend/menu/' + item.icon" class="tui-menu__ic"></image>
							<view class="tui-menu__text">{{ item.text }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="tui-scroll__box"><view class="tui-scroll__bar"></view></view>
			</view>
		</view>
	</view>
</template>
<script src="./scroll.wxs" lang="wxs" module="wxs"></script>
<script>
export default {
	data() {
		return {
			menuList: [
				{
					icon: 'icon_home_activity.png',
					text: '限时活动'
				},
				{
					icon: 'icon_home_quickpurchase.png',
					text: '快速选购'
				},
				{
					icon: 'icon_home_storedvalue.png',
					text: '充值优惠'
				},
				{
					icon: 'icon_home_coupon.png',
					text: '领券中心'
				},
				{
					icon: 'icon_home_group.png',
					text: '超值拼团'
				},
				{
					icon: 'icon_home_classify.png',
					text: '精选分类'
				}
			],
			menuList2: [
				{
					icon: 'icon_home_integral.png',
					text: '积分红包'
				},
				{
					icon: 'icon_home_coupon.png',
					text: '领券中心'
				},
				{
					icon: 'icon_home_share.png',
					text: '分享有礼'
				},
				{
					icon: 'icon_home_impower.png',
					text: '会员专区'
				},
				{
					icon: 'icon_home_brand.png',
					text: '品牌展馆'
				},
				{
					icon: 'icon_home_customer.png',
					text: '客服中心'
				}
			],
			scrollW: uni.upx2px(168 * 6),
			width: 0
		};
	},
	onLoad() {
		setTimeout(() => {
			this.width = uni.getSystemInfoSync().windowWidth - 30;
		}, 50);
	}
};
</script>

<style>
/**
	 *  案例一
	 */
.tui-bg__white {
	background-color: #ffffff;
	border-radius: 6rpx;
	overflow: hidden;
}

.tui-goods__list {
	display: flex;
	align-items: center;
	padding: 0 24rpx;
}

.tui-goods__item {
	background-color: #fff;
	width: 150rpx;
	height: 230rpx;
	border-radius: 6rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-shrink: 0;
	margin-right: 18rpx;
}

.tui-goods__imgbox {
	width: 150rpx;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.tui-goods__img {
	max-width: 150rpx;
	max-height: 150rpx;
	display: block;
}

.tui-pri__box {
	max-width: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tui-sale-pri {
	display: flex;
	align-items: flex-end;
	padding: 10rpx 0 8rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	line-height: 28rpx;
	color: #eb0909;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tui-size-sm {
	font-size: 24rpx;
	line-height: 24rpx;
	transform: scale(0.8);
	transform-origin: 0 50%;
}

.tui-original__pri {
	font-size: 24rpx;
	line-height: 24rpx;
	color: #999999;
	transform-origin: center 10%;
	transform: scale(0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: line-through;
}

.tui-more__box {
	width: 70rpx;
	height: 210rpx;
	background: #fff0f0;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	margin-right: 23rpx;
}

.tui-more__text {
	color: #eb0909;
	font-size: 26rpx;
	width: 25rpx;
}

.tui-more__ic {
	width: 20rpx;
	height: 20rpx;
	margin-top: 13rpx;
	display: block;
}

.tui-space__box {
	width: 1rpx;
	height: 230rpx;
	background: #fff;
	flex-shrink: 0;
}

/**
	 *  案例二
	 */
.tui-menu__list {
	width: 100%;
	box-sizing: border-box;
	border-radius: 6rpx;
	overflow: hidden;
	padding: 10rpx 0;
}

.tui-menu__box {
	display: flex;
}

.tui-menu__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 168rpx;
	padding: 24rpx 0;
	box-sizing: border-box;
	flex-shrink: 0;
}

.tui-menu__ic {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	background-color: #f2f2f2;
}

.tui-menu__text {
	font-size: 24rpx;
	color: #333;
	padding-top: 12rpx;
}

.tui-scroll__box {
	width: 100rpx;
	height: 8rpx;
	background-color: #f2f2f2;
	margin: 16rpx auto 24rpx;
	border-radius: 8rpx;
	position: relative;
}

.tui-scroll__bar {
	width: 40rpx;
	height: 8rpx;
	background-color: #5677fc;
	border-radius: 8rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	transition: all 0.2s linear;
}

</style>
